<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>PhoneBook Demo</title>
	<link rel="stylesheet" type="text/css" href="css/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script>
		$(function(){
		
		
		

			$('#tt').datagrid({
			   url:'datagrid_data1.json',  
               width:305,
				height:140,			   
              columns:[[   
                      {field:'name',title:'Name',colspan:2,width:100},   
                      {field:'code',title:'Number',width:100},   
                      {field:'opt' ,title:'Action',width:100,align:'center',
					  formatter:function(value,row,index){   
                        return '<a href="#" onclick="deleterow('+index+')">删除</a>';

					  
					  }   
					  }
              ]]   

			});
			
			
			
			
			
		});
		
		function updateActions(){
			var rowcount = $('#tt').datagrid('getRows').length;
			for(var i=0; i<rowcount; i++){
			   //   alert("updateRow: "+i);
				$('#tt').datagrid('updateRow',{
				 
					index:i,
					row:{opt:''}
				});
			}
		}
		
		  function deleterow(index){  
                     //   alert(index);		  
                       $.messager.confirm('Confirm','Are you sure?',function(r){   
                          if (r){   
                          $('#tt').datagrid('deleteRow', index); 
                                     updateActions();						  
                             }   
                            });   
							};
							
		function insert(){
			
		      var num=$("#pnt1").val();
			  
			  $.messager.prompt('My Title', '输入姓名', function(r){
				if (r){
				$('#tt').datagrid('insertRow', {
				index: 0,
				row:{
					name:r,
					code:num
				}
			});
					
				}
			});
			  
			
		
		}					
	</script>
</head>
<body>
	<h2>电话薄原型</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		
	</div>
	<div style="margin-bottom:10px">
	    <input type="text" id="pnt1" value="13800138000"/>
		<input type="button" name="audio1"  onclick="insert()" value="加入到电话薄"/>
	</div>
	<table id="tt"></table>
</body>
</html>